<template>
  <div class="container">
    <!--
      a-card是卡片效果，常见属性
      title:标题
    -->
    <a-card title="登录" :bordered="false" class="loginBox">
      <a-form
        :model="user"
        @finish="login">
        <a-form-item
          label="用户名"
          name="account"
          :rules="[{ required: true, message: '请输入您的用户名!' }]">
          <a-input v-model:value="user.account" >
            <template #prefix>
              <user-outlined type="user" style="color: rgba(0, 0, 0, 0.45)"/>
            </template>
          </a-input>
        </a-form-item>
        <a-form-item
          label="密&nbsp;&nbsp;&nbsp;&nbsp;码"
          name="password"
          :rules="[{ required: true, message: '请输入您的密码!' }]">
           <a-input-password v-model:value="user.password">
              <template #prefix>
                <lock-outlined style="color: rgba(0, 0, 0, 0.45)"/>
              </template>
           </a-input-password>
        </a-form-item>
        <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
           <a-space>
            <a-button type="primary" html-type="submit">登录</a-button>
            <a-button>注册</a-button>
           </a-space>
        </a-form-item>
      </a-form>
    </a-card>
  </div>
</template>

<script lang='ts'>
import { UserOutlined,LockOutlined} from '@ant-design/icons-vue';
import {IUserState} from '../types'
import {ref,reactive} from 'vue'
import api from '../api'
import {useRouter} from 'vue-router'
import useUsersStore from '../store/users'
import {storeToRefs} from 'pinia'
export default{
 components:{
  UserOutlined,
  LockOutlined
 },
 setup(){
  const router=useRouter()
  const store=useUsersStore()
  //定义一个响应式对象数据
  let user=reactive<IUserState>({
    account:'xiaofei',
    password:'666666'
  })
  const login=async(values:IUserState)=>{
    const {data:{code,data:{userInfo,token}}}=await api.user.login(values)
    //暂时将toke保存到localStorage
    store.setLoginResult(userInfo,token)
    const {userInfo:ui,token:tok}=storeToRefs(store)
    //跳转
    router.replace('/home')
  }
  return{
    user,
    login
  }
 }
}
</script>

<style lang='scss' scoped>
  .container{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ccc;
    padding: 30px;
    height: 100vh;
    .loginBox{
      width: 450px;
      height: 300px;
    }
  }
</style>